{% include 'header.html' %}

  <title>Wox - {% block title %}{% endblock %}</title>
  <link href="{{ STATIC_URL }}css/jqModal.css" rel="stylesheet" type="text/css">
  <link href="{{ STATIC_URL }}css/validationEngine.jquery.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.8.1.min.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-form.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/mustache.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-Mustache.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.validationEngine-en.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.validationEngine.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.blockUI.js"></script>
  <script type="text/javascript"> 

    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    function showLoading(obj) {
        if (obj) {
            var nextobj = obj.next('.field-indic');
            if (nextobj)
                nextobj.attr('class', 'loading-indicator');
        }
    }

    function endLoading(obj) {
        if (obj) {
            var nextobj = obj.next('.field-indic');
            if (nextobj)
                nextobj.attr('class', '');
        }
    }

    Mustache.tags = ['[[', ']]'];

    $(document).ready(function() {
        $('#form_install').validationEngine('attach', {scroll: false});
        $('body').mousemove(function() {
            $('#form_install').validationEngine('hideAll');
        });

        var csrftoken = getCookie('csrftoken');
        var itype = $('#hid_itype').val();

        $('#sel_os_release').change(function() { 
            var sel_osr = $(this);

            /* For feild validation: if validation failed, 
               validationEngine return true.
               For form validation: if validation failed, 
               validationEngine return false 
             */
            if (sel_osr.validationEngine('validate')) {
                return;
            }

            $.ajax({
                type: 'post',
                url: '{%url ajax_getbnomgrp %}',
                dataType: 'json',
                data: {sel_site: $('#sel_site').val(),
                       sel_os_release: sel_osr.val(),
                       hid_itype: itype},
                crossDomain: false,
                beforeSend: function(xhr, settings) {
                    if (!csrfSafeMethod(settings.type)) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                    showLoading($('#inp_build'))
                    showLoading($('#sel_mgroup'))
                },
                success: function(r) {
                    endLoading($('#inp_build'))
                    endLoading($('#sel_mgroup'))

                    if (itype == "neti") {
                        // for netinstall
                        $.Mustache.addFromDom('inp_build_tmpl', 'sel_mgroup_tmpl');
                        $('#inp_build').mustache('inp_build_tmpl', {m_builds: r.builds}, {method: 'html'});
                        //$('#inp_build')[0].selectedIndex = 0;
                    } else {
                        // for os/dt update
                        $('#inp_build').attr('value', r.builds);
                        $.Mustache.addFromDom('sel_mgroup_tmpl');
                    }
                    $('#sel_mgroup').mustache('sel_mgroup_tmpl', {m_mgroups: r.mgroups}, {method: 'html'});
                },
                error: function() {
                    endLoading($('#inp_build'))
                    endLoading($('#sel_mgroup'))
                    alert("get build no. or machine group failed!");
                }
            }); // end of ajax
          }); // end of change


        $('#btn_search').click(function() { 
            if ($('#sel_os_release').validationEngine('validate')) {
                return;
            }

            var container = $('#div_machine_list');
            container.html("querying...");

            $.ajax({
                type: 'post',
                url: '{%url ajax_getmlst %}',
                dataType: 'html',
                data: $('#form_install').serializeArray(),
                async: false,
                crossDomain: false,
                beforeSend: function(xhr, settings) {
                    if (!csrfSafeMethod(settings.type)) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                },
                success: function(r) {
                    container.html(r);
                },
                error: function() {
                    container.empty();
                    alert("get machine list failed!");
                }
            }); // end of ajax
        }); // end of click
      
        $('#inp_build').change(function() { 
            $(this).validationEngine('validate');
        });

        $('#div_machine_list').on('click', '#btn_install', function(e) { 
            e.preventDefault(); 

            $('#form_install').ajaxSubmit({
                dataType: 'json',
                beforeSerialize:function() {
                    if (! $('#form_install').validationEngine('validate')) {
                        return false;
                    }

                    $.blockUI({ message: '<div id="div_blockbox" class="blockbox_wait"><h3>Just a moment...</h3></div>'});
                },
                success:function(r) {
                    if (itype == 'neti') {
                        // for netinstall
                        // type: alert, info
                        $('#div_blockbox').attr('class', 'blockbox_' + r.type);
                        $('#div_blockbox').html(r.content);
                        $('.blockOverlay').attr('title','click to go back').click(function() {
                            var opt = {};
                            if (r.type == 'info') {
                                opt['onUnblock'] = function() { $('#div_machine_list').empty(); }
                            }
                            $.unblockUI(opt);
                        });
                    } else {
                        // for os/dt update
                        if (r.type == 'alert') {
                            $('#div_blockbox').attr('class', 'blockbox_' + r.type);
                            $('#div_blockbox').html(r.content);
                            $('.blockOverlay').attr('title','click to go back').click($.unblockUI);
                        } else {
                            // r.type == info, start update successfully
                            $.unblockUI();
                            //FIXME 
                        }
                    }
                },
                error:function() {
                    $.unblockUI();
                    alert("submit form_install failed!");
                }
            });  // end of ajaxSubmit
        }); // end of on

    }); // end of ready()

  </script>
</head>

<body class="defect-opensolaris-org-bz">
{% include 'topnav.html' %}
<div>
  <table id="tabtitles" border="0" cellpadding="0" cellspacing="0">
  <tbody><tr>
    <td id="title">
    <p><font color="#FFFFFF">&nbsp;Status &raquo; {% block nav_title %}{% endblock %}</font></p>
    </td></tr>
  </tbody></table>
</div>

<div id="bugzilla-body" style="min-height: 450px;">
 
<form id="form_install" method="POST" action="{% block action %}{% endblock %}">
<input type="hidden" id="hid_itype" name="hid_itype" value="{{ dj_itype }}"/>
<div id="div_search">
{% csrf_token %}
  <table border="0" align="left" class="bz_buglist">

    <tr>
      <td class="field-label">Site:</td>
      <td><select id="sel_site" name="sel_site" class="field-input validate[required]">
    {% for s in dj_site_qs %}
      <option value="{{s.id}}" {%ifequal s.name dj_this_site %} selected {% endifequal %}>{{s.name}}</option>
    {% endfor %}
      </select><span name="field-indic"></span>
    </td></tr>

    <tr>
      <td class="field-label">OS Release:</td>
      <td><select id="sel_os_release" name="sel_os_release" class="field-input validate[required]"))>
      <option value=""></option>
    {% for r in dj_os_release_qs %}
      <option value="{{r.name}}">{{r.description}}</option>
    {% endfor %}
      </select><span name="field-indic"></span>
    </td></tr>

  {% block inp_build %}
  {% endblock %}

    <tr>
      <td class="field-label">Host:</td>
      <td><input  type="text" id="txt_host" name="txt_host" value="" class="field-input"/><span name="field-indic"></span>
    </td></tr> 

    <tr>
      <td class="field-label">MGroup:</td>
      <td><select id="sel_mgroup" name="sel_mgroup" class="field-input">
      <!-- ajax -->
      </select><span name="field-indic"></span>
    </td></tr> 

    <tr>
      <td class="field-label"></td>
      <td><input id="btn_search" name="btn_search" type="button" value="Find Machine" style="margin-left: 10px;"/>
    </td></tr> 
      
  </table>
</div>
<!-- end of div_search -->

<br>
<table class="bz_buglist" cellpadding="4" cellspacing="0" width="100%">
<tbody>
</tbody></table>
<div><br></div>

<div id="div_machine_list">
<!-- ajax -->
</div>
<!-- end of div_machine_list -->

</form>

</div>
<!-- end of div bugzilla-body -->

<!-- Mustache Templates -->

<!-- Fix delimiter conflict between Django and Mustache -->
<!-- or try Mustache.tags = ['[[', ']]']; -->
<!-- {% templatetag openvariable %}=[[ ]]={% templatetag closevariable %} -->
<script id="inp_build_tmpl" type="text/html">
    [[#m_builds]]
      <option value='[[.]]'>[[.]]</option>
    [[/m_builds]]
</script>

<script id="sel_mgroup_tmpl" type="text/html">
      <option value=""></option>
    [[#m_mgroups]]
      <option value='[[id]]'>[[name]]</option>
    [[/m_mgroups]]
</script>
<!-- End of Mustache Template -->

{% include 'footer.html' %}
